<template>
    <div class="page lucky">
        <div class="hd">
            <a href="http://mp.weixin.qq.com/s?__biz=MzAxMTU0MDMyMg==&mid=402214893&idx=1&sn=0866541a43fb2eb1e997b055d2a18d66#rd" class="ruler">活动规则>></a>
            <h1 class="title">闯关答题</h1>
            <h1 class="title">天天抽奖</h1>
            <p>一张奖券可兑换一次刮奖机会</p>
            <i></i>
        </div>
        <div class="chance">你有 <span>{{serverData.ticketNum}}</span>张奖券</div>
        <div class="cont">
            <div class="cover" v-if="!isOpen" transition="open"><sheet v-el:sheet @touchstart="startAction"></sheet></div>
            {{reward.type}}＋{{reward.amount}}
        </div>
        <div class="button-view">
            <a class="weui_btn weui_btn_mini weui_btn_default" @click="restart">继续撕奖></a>
            <a class="weui_btn weui_btn_mini weui_btn_default" @click="shareShow">分享</a>
        </div>
        <div class="info">
            <p v-for="val in msgList">
                {{val.nick_name}} 刚刚 获得了 <span>{{val.amount}}</span> {{val.type}}
            </p>
        </div>
        <div class="prize-title">金币可在APP中兑换以下奖品</div>
        <div class="prize-con">
            <img src="./img/reward_05.png"/>
            <img src="./img/reward_07.png"/>
            <img src="./img/reward_09.png"/>
            <img src="./img/reward_14.png"/>
            <img src="./img/reward_15.png"/>
            <img src="./img/reward_17.png"/>
        </div>
        <div class="download">
            <div>推荐游戏还送钱的奇葩</div>
            <a class="download-btn" href="http://fusion.qq.com/cgi-bin/qzapps/unified_jump?appid=12174704&from=wx&isTimeline=false&actionFlag=0&params=pname%3Dcom.youxi78.app%26versioncode%3D1%26actionflag%3D0%26channelid%3D">下载安卓版</a>
            <div class="ios-des">IOS版开发中，敬请期待</div>
        </div>
        <msg :data="errorData"></msg>
        <div class="mask" v-show="share_mask_show" @click="shareHide"></div>
    </div>
</template>
<script type="text/ecmascript-6">
    import './style/lucky.less'
    import Sheet from './components/Sheet.vue'
    import server from '../lib/server'
    import {setSession,getSession} from '../lib/session'
    import Msg from '../components/Msg.vue'
    import share from '../lib/weixinShare'
    export default{
        components:{
            Sheet,Msg
        },
        data(){
            return {
                isOpen:false,
                serverData:getSession(),
                reward:{},
                msgList:[],
                errorData:{},
                share_mask_show:false
            }
        },
        ready(){
            server('/P/Public/getscrollinfo').success((response)=>{
                if(response.code==1){
                    let arr=[];
                    for(let index in response.data){
                        arr.push(response.data[index]);
                    }
                    this.msgList=arr;
                }else{
                    this.errorData={
                        show:true,
                        type:'error',
                        msg:response.msg
                    };
                }
            });
        },
        methods:{
            shareShow(){
                this.share_mask_show=true;
            },
            shareHide(){
                this.share_mask_show=false;
            },
            startAction(){
                if(this.serverData.ticketNum<=0){
                    return this.errorData={
                            show:true,
                            type:'error',
                            msg:'您的奖券数不足，去完成每日任务获得更多奖券'
                        };
                }
                var el=this.$els.sheet;
                el.style['transition']=el.style['-webkit-transition']='width 1.5s';
                el.style.width=25+'rem';
                server('/P/U/getwxhb',{
                    session_id:this.serverData.session_id
                }).success((response)=>{
                    if(response.code==1){
                        this.reward=response.data;
                        this.reward.nick_name=this.serverData.name;
                        this.serverData.ticketNum-=1;
                        this.msgList.splice(0,0,this.reward);
                        setSession(this.serverData);
                        share({
                            desc:`我因为丰富的 游戏知识抽中了游戏钱吧的${this.reward.amount}${this.reward.type}红包，你来不来？`,
                            success(){
                                this.shareHide();
                            }
                        });
                    }else{
                        this.isOpen=false;
                        this.errorData={
                            show:true,
                            type:'error',
                            msg:response.msg
                        };
                    }
                });
                var touchHandle=function(e){
                    e.preventDefault();
                };
                document.querySelector('body').addEventListener('touchstart',touchHandle);
                setTimeout(()=>{
                    this.isOpen=true;
                    document.querySelector('body').removeEventListener('touchstart',touchHandle);
                },500);
            },
            restart(){
                this.isOpen=false;
            }
        }
    }
</script>